<template>
  <!--维护表单子控件的 meta -->
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基础属性</span>
          </div>
        </template>
        <el-scrollbar height="600px">
          <item-base/>
        </el-scrollbar>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>扩展属性</span>
          </div>
        </template>
        <item-extend/>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>导出json</span>
          </div>
        </template>
        <item-format :meta="itemMeta"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { ElRow, ElCol, ElCard, ElScrollbar } from 'element-plus'
  import { regItemState } from './state-item'
  import itemBase from './item-base.vue'
  import itemExtend from './item-extend.vue'
  import itemFormat from './item-output.vue'

  export default defineComponent({
    name: 'nf-meta-help-item-base-card',
    directives: {
    },
    components: {
      ElRow, ElCol, ElCard, ElScrollbar,
      itemBase,
      itemExtend,
      itemFormat
    },
    props: {
      itemMeta: Object // 要维护的 meta
    },
    setup(props, context) {

      // 根据属性，设置状态
      const state = regItemState(props.itemMeta)

      state.setMeta(props.itemMeta)

      // 外部设置属性的函数，设置和获取分开处理，代码可以简单一点
      context.expose({
        setMeta: (meta) => {
          // console.log('内部设置meta：', meta)
          state.setMeta(meta)
        }
      })
       
      return {
      }
    }
  })
</script>